<template>
    <div id="my_logs_list_" class="container-fluid padding">
        <div>
            <el-form ref="searchDatas" :inline="true" :rules="rules" :model="searchDatas" label-width="100px" class="padding">
                <el-form-item label="操作时间" prop="operateTime">
                    <el-date-picker
                            v-model="searchDatas.operateTime"
                            type="datetimerange"
                            placeholder="选择日期时间"
                            align="right"
                            :picker-options="pickerOptions"
                            value-format="timestamp"
                            style="width: 715px">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="操作者工号" prop="operatorYggh">
                    <el-input v-model="searchDatas.operatorYggh" style="width: 300px"></el-input>
                </el-form-item>
                <el-form-item label="操作者用户" prop="operatorUsername">
                    <el-input v-model="searchDatas.operatorUsername" style="width: 300px"></el-input>
                </el-form-item>
                <el-form-item label="操作者坐席" prop="operatorZuoxi">
                    <el-input v-model="searchDatas.operatorZuoxi" style="width: 300px"></el-input>
                </el-form-item>
                <el-form-item label="操作内容" prop="operateContent">
                    <el-input v-model="searchDatas.operateContent" style="width: 300px"></el-input>
                </el-form-item>
                <el-form-item label="操作ip" prop="operateIp">
                    <el-input v-model="searchDatas.operateIp" style="width: 300px"></el-input>
                </el-form-item>
                <el-form-item label="等级" prop="color">
                    <el-select  v-model="searchDatas.color" placeholder="请选择" style="width: 300px">
                        <el-option
                                v-for="item in colorOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label=" ">
                    <el-button type="primary" @click="submitForm()">查询</el-button>
                    <el-button @click="$refs['searchDatas'].resetFields()">重置</el-button>
                </el-form-item>
            </el-form>
            <table class="layui-hide padding" id="myLogsList"  lay-filter="myLogsList"></table>
            <div id="myLogsDialog" style="display: none" class="padding">
                <div v-for="item in dialogContent" :key="item.index" :style="'color:'+item.color" >
                    <div>（{{JSON.stringify(item.ip)}}）{{item.time}}：&nbsp;&nbsp;{{item.content}}</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import {formatDateTime} from '@/common/js/util.js'
    export default {
        name: "mylogs",
        data: function () {
            return {
                rules:{},
                pickerOptions: {
                    shortcuts: [{
                        text: '今天',
                        onClick(picker) {
                            picker.$emit('pick', new Date());
                        }
                    }, {
                        text: '昨天',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24);
                            picker.$emit('pick', date);
                        }
                    }, {
                        text: '一周前',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', date);
                        }
                    }]
                },
                dialogContent:[],
                colorOptions:[
                    {value: '',label: ''},
                    {value: 'yellow',label: '黄色'},
                    {value: 'red',label: '红色'},
                    {value: 'blue',label: '蓝色'},
                    {value: 'black',label: '黑色'},
                    {value: 'green',label: '绿色'},
                ],
                tableHeader:[//列表的头
                    {field: 'id',  title: '序列号', sort: true, fixed: 'left',width:120}
                    , {field: 'operatorYggh',title: '操作者工号',  align:'center',sort: true,width:120}
                    , {field: 'operatorUsername',title: '操作者用户', align:'center',sort: true,width:120}
                    , {field: 'operatorZuoxi',title: '操作者坐席', align:'center',sort: true,width:120}
                    , {field: 'operateTime',title: '操作时间', align:'center',sort: true,width:240,templet: function(res){return formatDateTime(res.operateTime);}}
                    , {field: 'operateContent',title: '操作内容', align:'center',sort: true,templet: function(res){return '<div style="color:'+res.color+'">'+res.operateContent+'</div>';}}
                    , {field: 'operateIp',title: '操作ip', align:'center',sort: true,width:180}
                    , {field: 'color',title: '颜色', align:'center',sort: true,width:160,templet: function(res){return '<div style="color:'+res.color+'">等级</div>';}}
                ],
                searchDatas:{
                    operatorYggh:'',
                    operatorUsername:'',
                    operatorZuoxi:'',
                    operateTime:'',
                    operateContent:'',
                    operateIp:'',
                    color:'',
                }
            }
        },
        created:function(){
            this.refreshTable(burl + 'logs/list')
        },
        methods:{
            submitForm:function(){
                this.refreshTable(burl + 'logs/list',this.searchDatas)
            },
            refreshTable:function (url,data) {
                layui.use('table',()=>{
                    layui.table.render({
                        elem: "#myLogsList"
                        , url: url //数据接口
                        , toolbar: '' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
                        , title: ''
                        , where:{MylogsSearch:data}
                        , method:"post"
                        , height: 500
                        , limits: [10, 30, 60, 90]
                        , cols: [this.tableHeader]
                        , page: true //开启分页
                    })
                })
            }
        },
    }
</script>